/* ========================================================================
     Component: utils
 ========================================================================== */

// Margins
// --------------------

.m0 {
  margin: 0 !important;
}

.ml0 {
  margin-left: 0 !important;
}

.mr0 {
  margin-right: 0 !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.m {
  margin: $margin-base !important;
}

.ml {
  margin-left: $margin-base !important;
}

.mr {
  margin-right: $margin-base !important;
}

.mt {
  margin-top: $margin-base !important;
}

.mb {
  margin-bottom: $margin-base !important;
}

.m-sm {
  margin: $margin-sm !important;
}

.ml-sm {
  margin-left: $margin-sm !important;
}

.mr-sm {
  margin-right: $margin-sm !important;
}

.mt-sm {
  margin-top: $margin-sm !important;
}

.mb-sm {
  margin-bottom: $margin-sm !important;
}

.m-lg {
  margin: $margin-lg !important;
}

.ml-lg {
  margin-left: $margin-lg !important;
}

.mr-lg {
  margin-right: $margin-lg !important;
}

.mt-lg {
  margin-top: $margin-lg !important;
}

.mb-lg {
  margin-bottom: $margin-lg !important;
}

.m-xl {
  margin: $margin-xl !important;
}

.ml-xl {
  margin-left: $margin-xl !important;
}

.mr-xl {
  margin-right: $margin-xl !important;
}

.mt-xl {
  margin-top: $margin-xl !important;
}

.mb-xl {
  margin-bottom: $margin-xl !important;
}

// Margin vertical / horizontal
.mv {
  @extend .mt;
  @extend .mb;
}

.mh {
  @extend .ml;
  @extend .mr;
}

.mv-lg {
  @extend .mt-lg;
  @extend .mb-lg;
}

.mh-lg {
  @extend .ml-lg;
  @extend .mr-lg;
}

.mv-sm {
  @extend .mt-sm;
  @extend .mb-sm;
}

.mh-sm {
  @extend .ml-sm;
  @extend .mr-sm;
}

// Paddings
// --------------------

.p0 {
  padding: 0 !important;
}

.pl0 {
  padding-left: 0 !important;
}

.pr0 {
  padding-right: 0 !important;
}

.pt0 {
  padding-top: 0 !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.pv0 {
  @extend .pt0;
  @extend .pb0;
}

.ph0 {
  @extend .pl0;
  @extend .pr0;
}

.p {
  padding: $padding-base !important;
}

.pl {
  padding-left: $padding-base !important;
}

.pr {
  padding-right: $padding-base !important;
}

.pt {
  padding-top: $padding-base !important;
}

.pb {
  padding-bottom: $padding-base !important;
}

.p-sm {
  padding: $padding-sm !important;
}

.pl-sm {
  padding-left: $padding-sm !important;
}

.pr-sm {
  padding-right: $padding-sm !important;
}

.pt-sm {
  padding-top: $padding-sm !important;
}

.pb-sm {
  padding-bottom: $padding-sm !important;
}

.p-lg {
  padding: $padding-lg !important;
}

.pl-lg {
  padding-left: $padding-lg !important;
}

.pr-lg {
  padding-right: $padding-lg !important;
}

.pt-lg {
  padding-top: $padding-lg !important;
}

.pb-lg {
  padding-bottom: $padding-lg !important;
}

.p-xl {
  padding: $padding-xl !important;
}

.pl-xl {
  padding-left: $padding-xl !important;
}

.pr-xl {
  padding-right: $padding-xl !important;
}

.pt-xl {
  padding-top: $padding-xl !important;
}

.pb-xl {
  padding-bottom: $padding-xl !important;
}

// Padding vertical / horizontal
.pv {
  @extend .pt;
  @extend .pb;
}

.ph {
  @extend .pl;
  @extend .pr;
}

.pv-xl {
  @extend .pt-xl;
  @extend .pb-xl;
}

.ph-xl {
  @extend .pl-xl;
  @extend .pr-xl;
}

.pv-lg {
  @extend .pt-lg;
  @extend .pb-lg;
}

.ph-lg {
  @extend .pl-lg;
  @extend .pr-lg;
}

.pv-sm {
  @extend .pt-sm;
  @extend .pb-sm;
}

.ph-sm {
  @extend .pl-sm;
  @extend .pr-sm;
}

// Border
// --------------------

.b0 {
  border-width: 0 !important;
}

.bl0 {
  border-left-width: 0 !important;
}

.br0 {
  border-right-width: 0 !important;
}

.bt0 {
  border-top-width: 0 !important;
}

.bb0 {
  border-bottom-width: 0 !important;
}

.br {
  border-right: 1px solid $border-color;
}

.bl {
  border-left: 1px solid $border-color;
}

.bt {
  border-top: 1px solid $border-color;
}

.bb {
  border-bottom: 1px solid $border-color;
}

.b, .ba {
  @extend .br;
  @extend .bl;
  @extend .bt;
  @extend .bb;
}

// all borders

// Border Radius Clear

.radius-clear {
  border-radius: 0 !important;
}

// Box Shadow Clear

.shadow-clear {
  box-shadow: 0 0 0 #000 !important;
}

// Text helpers

.text-white {
  color: #fff;
}

.text-inverse {
  color: $brand-inverse;
}

.text-alpha {
  color: $text-alpha;
}

.text-pink {
  color: $brand-pink;
}

.text-purple {
  color: $brand-purple;
}

.text-dark {
  color: $brand-dark;
}

.text-alpha-inverse {
  color: $text-alpha-inverse;
}

.text-green {
  color: $brand-green;
}

.text-yellow {
  color: $brand-yellow;
}

.text-gray-darker {
  color: $gray-darker;
}

.text-gray-dark {
  color: $gray-dark;
}

.text-gray {
  color: $gray;
}

.text-gray-light {
  color: $gray-light;
}

.text-gray-lighter {
  color: $gray-lighter;
}

// Text sizing

.text-sm {
  font-size: $text-sm;
}

.text-md {
  font-size: $text-md;
}

.text-lg {
  font-size: $text-lg;
}

// Text others

.text-nowrap {
  white-space: nowrap;
}

.text-thin {
  font-weight: 100 !important;
}

.text-normal {
  font-weight: normal !important;
}

.text-bold {
  font-weight: bold !important;
}

.inline {
  display: inline-block !important;
}

.block-center {
  margin: 0 auto;
}

// Background helpers
//  Generates classes for
//    .brand
//    .brand-light
//    .brand-dark

.bg-primary {
  @include bgcolor-variant('primary');
}

.bg-success {
  @include bgcolor-variant('success');
}

.bg-info {
  @include bgcolor-variant('info');
}

.bg-warning {
  @include bgcolor-variant('warning');
}

.bg-danger {
  @include bgcolor-variant('danger');
}

.bg-green {
  @include bgcolor-variant('green');
}

.bg-pink {
  @include bgcolor-variant('pink');
}

.bg-purple {
  @include bgcolor-variant('purple');
}

.bg-inverse {
  @include bgcolor-variant('inverse');
}

.bg-yellow {
  @include bgcolor-variant('yellow');
}

.bg-white {
  @include make-bg(#fff, inherit);
}

.bg-gray-darker {
  @include make-bg($gray-darker);
}

.bg-gray-dark {
  @include make-bg($gray-dark);
}

.bg-gray {
  @include make-bg($gray, $text-color);
}

.bg-gray-light {
  @include make-bg($gray-light, $text-color);
}

.bg-gray-lighter {
  @include make-bg($gray-lighter, $text-color);
}

.bg-cover {
  background-size: cover;
}

// Common thumbnail sizes (ideal for images)

.thumb8 {
  @include thumnbail-size();
}

.thumb16 {
  @include thumnbail-size(16px);
}

.thumb24 {
  @include thumnbail-size(24px);
}

.thumb32 {
  @include thumnbail-size(32px);
}

.thumb48 {
  @include thumnbail-size(48px);
}

.thumb64 {
  @include thumnbail-size(64px);
}

.thumb80 {
  @include thumnbail-size(80px);
}

.thumb96 {
  @include thumnbail-size(96px);
}

.thumb128 {
  @include thumnbail-size(128px);
}

// Vertical align helpers

.align-middle {
  vertical-align: middle;
}

.align-top {
  vertical-align: top;
}

.align-bottom {
  vertical-align: bottom;
}

// Background image
.bg-center {
  background-position: center center;
  background-size: cover;
}

// List
.list-icon {
  em {
    font-size: 14px;
    width: 40px;
    vertical-align: middle;
    margin: 0;
    display: inline-block;
    text-align: center;
    @include transition(all .2s);
    line-height: 30px;
  }
  div:hover em {
    @include scale(3, 3)
  }
}

// Components size

.wd-xxs {
  width: $wd-xxs;
}

.wd-xs {
  width: $wd-xs;
}

.wd-sm {
  width: $wd-sm;
}

.wd-sd {
  width: $wd-sd;
}

.wd-md {
  width: $wd-md;
}

.wd-lg {
  width: $wd-lg;
}

.wd-xl {
  width: $wd-xl;
}

.wd-xxl {
  width: $wd-xxl;
}

.wd-wide {
  width: $wd-wide;
}

.wd-auto {
  width: $wd-auto;
}

.wd-zero {
  width: $wd-zero;
}

// Extra labels

.label-inverse {
  @include label-variant($brand-inverse);
}

.label-green {
  @include label-variant($brand-green);
}

.label-pink {
  @include label-variant($brand-pink);
}

.label-purple {
  @include label-variant($brand-purple);
}

// Extra alert

.alert-purple {
  @include alert-variant($brand-purple, $brand-purple, #fff);
}

.alert-green {
  @include alert-variant($brand-green, $brand-green, #fff);
}

.alert-pink {
  @include alert-variant($brand-pink, $brand-pink, #fff);
}

.alert-inverse {
  @include alert-variant($brand-inverse, $brand-inverse, #fff);
}

// Simulate clickable element
.clickable {
  cursor: pointer;
}

// Absolute center element
// ----------------------------------- 

.abs-center-container {
  position: relative;
}

.abs-center {
  // width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  &.abs-fixed {
    position: fixed;
    z-index: 999;
  }

  &.abs-right {
    left: auto;
    right: 20px;
    text-align: right;
  }

  &.abs-left {
    right: auto;
    left: 20px;
    text-align: left;
  }
}

@media (max-height: 720px) {
  .abs-center {
    position: relative;
  }
}

.link-unstyled {
  text-decoration: none !important;
  outline: none !important;
}

.no-resize {
  resize: none;
  max-width: 100%;
  min-width: 100%;
}

/** 
 * Displays hidden content on hover. Add this class to the parent element.
 * Markup
 *   <div class="hover-visible">
 *    <div class="hover-hidden"></div>
 *   </div>
 */

.hover-visible {

  .hover-hidden {
    display: none;
  }

  &:hover .hover-hidden {
    display: block;
  }
  &:hover .hover-inline {
    display: inline-block;
  }
}

//
// MEDIA BOX CLASSIC
// 
// since BS 3.3.x it doesn't support fullwidth form-controls so we use 
// a copy to make possible the use of the classic component
// ----------------------------------- 

// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------

// Common styles
// -------------------------

// Clear the floats
.media-box,
.media-box-body {
  overflow: hidden;
  zoom: 1;
}

// Proper spacing between instances of .media-box
.media-box,
.media-box .media-box {
  margin-top: 15px;
}

.media-box:first-child {
  margin-top: 0;
}

// For images and videos, set to block
.media-box-object {
  display: block;
}

// Reset margins on headings for tighter default spacing
.media-box-heading {
  margin: 0 0 5px;
}

// Media image alignment
// -------------------------

.media-box {
  > .pull-left {
    margin-right: 10px;
  }
  > .pull-right {
    margin-left: 10px;
  }
}

// Media list variation
// -------------------------

// Undo default ul/ol styles
.media-box-list {
  padding-left: 0;
  list-style: none;
}
